$white: #ffffff;
$red: #F40226;
$blue: #078DFF;
$green: #05C911;
$orange: #FC6932;

.clearfix {
	clear: both;
}
body {
	padding: 0;
	margin: 0;
}
.main-wrapper * {
	padding: 0;
	margin: 0;
	list-style: none;
}
.main-wrapper {
	width: 100%;
	background-color: #f0f0f0;
}
.main-container {
	width: 1300px;
	margin: 0 auto;
}
.category-box {
	width: 100%;
	font-size: 14px;
	margin-bottom: 16px;
	&:after {
		display: block;
		content: '';
		clear: both;
	}
	.category-label {
		width: 100px;
		line-height: 50px;
		text-align: center;
		color: #000000;
		float: left;
		background-color: #f6f7f7;
		font-weight: bold;
	}
	.top-n-category {
		overflow: hidden;
		float: left;
		background-color: $white;
		li {
			font-size: 14px;
			padding: 0 8px;
			line-height: 50px;
			float: left;
			position: relative;
			cursor: pointer;
			&:after {
				content: '';
				display: block;
				width: 1px;
				height: 16px;
				background-color: #D9D9D9;
				position: absolute;
				right: 0;
				top: 17px;
			}
			&:last-child {
				&:after {
					display: none;
				}
			}
			&.active {
				color: $blue;
			}
		}
	}
	.category-select {
		float: right;
		.category-select-label {
			font-size: 16px;
			color: $blue;
			line-height: 50px;
		}
	}
}
.main-block {
	width: 100%;
	background-color: $white;
	border-radius: 5px;
	min-height: 200px;
	margin-bottom: 20px;
	.main-block-header {
		padding: 14px;
		border-bottom: 1px solid #fafafa;
		&:after {
			display: block;
			clear: both;
			content: '';
		}
		.main-title {
			float: left;
			.platform-btn {
				color: #000000;
				margin-right: 10px;
			    font-weight: bold;
				font-size: 20px;
    			line-height: 20px;
				text-decoration: none;
				&.active {
					color: $orange;
				}
				&:before {
					content: '';
				    width: 4px;
				    height: 22px;
				    display: inline-block;
				    background-color: #6b6b6b;
				    vertical-align: top;
				    margin-right: 10px;
				}
			}
		}
		.main-time {
			float: right;
			font-size: 14px;
			color: #666666;
		}
	}
	.main-block-body {
		padding: 14px;
	}
	.padding {
		padding: 14px;
	}
}
.main-box {
	width: 48%;
	float: left;
	margin-left: 1%;
	margin-right: 1%;
	.main-box-title {
		font-size: 16px;
		margin-bottom: 10px;
	}
}
.main-box-2 {
	width: 48%;
	float: left;
	margin-left: 1%;
	margin-right: 1%;
}
.sale-list {
	width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
    .sale-item {
	    width: 48%;
	    height: 130px;
	    border: 1px solid #f1f1f1;
	    background: #ffffff;
	    border-radius: 5px;
	    margin-right: 1%;
	    float: left;
		&:last-child {
    		margin-right: 0;
		}
		p {
		    color: #7d7d7d;
		    font-size: 12px;
		    margin: 25px 10px;
		    &.sale-item-value {
    			font-size: 16px;
			}
		}
	}
}
.block-header {
    width: 100%;
    overflow: hidden;
    margin-bottom: 10px;
    .block-title {
	    float: left;
	    font-size: 16px;
		span {
		    color: #333333;
		    cursor: pointer;
		    &.active {
		    	color: $blue;
		    }
		}
	}
}
.type-row {
    float: right;
    margin-right: 10px;
    .type-split {
    	margin: 0 10px;
	}
	.type-btn {
 		cursor: pointer;
 		&.active {
 			color: $blue;
 		}
	}
}
.main-table {
	width: 100%;
	border-collapse: collapse;
	thead {
		background-color: #f9fbfd;
		th {
			color: #000000;
			font-size: 14px;
			line-height: 36px;
			text-align: center;
			border: none;
		}
	}
	tbody {
		tr {
			line-height: 40px;
			background-color: #ffffff;
			transition: .5s background-color ease-in;
			&:nth-child(2n) {
				background-color: #fcfdfe;
			}
			&:hover {
				background-color: #f9fbfd;
			}
		}
		td {
			text-align: center;
			font-size: 14px;
			position: relative;
			.rank-img {
				display: block;
				margin: auto;
			}
		}
	}
	.main-head-btn-row {
		display: inline;
		position: relative;
		margin-left: 5px;
	}
	.main-head-btn {
		$height: 5px;
		position: absolute;
		left: 0;
		font-size: 0;
		cursor: pointer;
		&.main-head-btn-up {
			top: 3px;
			width: 0; 
		    height: 0; 
		    border-left: $height solid transparent;
		    border-right: $height solid transparent;
		    border-bottom: $height solid #999999;
		    &.active {
				border-bottom: $height solid #078DFF;
			}
		}
		&.main-head-btn-down {
			top: 10px;
			width: 0; 
		    height: 0; 
		    border-left: $height solid transparent;
		    border-right: $height solid transparent;
		    border-top: $height solid #999999;
		    &.active {
				border-top: $height solid #078DFF;
			}
		}
	}
}